<template>
  <div id="home">
    <header>
      <TopNav></TopNav>
    </header>
    <div class="home">
      <nav>
        <NavigationBar></NavigationBar>
        <!-- 空白页面测试 -->
        <!-- <router-link to="/home/blank">black</router-link>| -->
        <!--  -->
        <!-- <router-link to="">朱志豪</router-link>|
        <router-link to="/worktabe">叶国平</router-link>|
        <router-link to="">孙讯东</router-link>|
        <router-link to="/DataOverview">薛凯</router-link>|
        <router-link to="">罗川</router-link>| -->
      </nav>
      <div class="container">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import NavigationBar from '@/components/Navigation_Components/NavigationBar.vue';
import TopNav from "@/components/Navigation_Components/TopNav.vue";
import { defineComponent } from 'vue';


export default defineComponent({
  name: 'HomeView',
  components: {
    NavigationBar,
    TopNav
  },
});
</script>
<style lang="less" scoped>
nav {
  width: 280px;
  min-height: 100%;
  background-color: #4B4453;
  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.home{
  display: flex;
 height: calc(100% - 80px);
  .container{
    // width: 100%;
    flex: 1;
    overflow: auto;
    padding: 20px 50px;
    background-color: #eee;
  }
}
#home{
  height: 100%;
}
</style>
